

<style>
.coupons_list_warp{
	display: flex;
	gap: 20px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}
.coupons_list_item-li{
	overflow: hidden;
	width: 100%;
	height:130px;
}
.coupons_list_item{
	width: 100%;
	height:100%;
	box-sizing: border-box;
	position: relative;
	border: 1px solid var(--border-color);
	display: flex;
	background: var(--bg-color);
	border-radius: 10px 10px 10px 10px;
	flex-direction: column;
	flex-direction: row;
}
.coupons_list_item::before{
		background: var(--page_background_color);
    border: 1px solid var(--border-color);
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-top: -11px;
		left: -11px;
		z-index: 10;
}
.coupons_list_item::after{
		background: var(--page_background_color);
    border: 1px solid var(--border-color);
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-top: -11px;
		right:  -11px;
		z-index: 10;
}
.coupons_item_value{
	display: flex;
	padding:  0 20px;
	box-sizing: border-box;
	gap: 10px;
	width: 110px;
	min-height:130px;
	flex-direction: column;
	justify-content: center;
	align-items: start;
}
.coupons_item_value_des{
	font-weight: 300;
}

.coupons_item_value_number{
	font-weight: bold;
	overflow: hidden;
	width: 100%;
	text-align: center;
	color: var(--theme_color);
	font-size: 18px;
}
.coupons_item_value_btn{
	padding: 0 14px;
	height: 30px;
	color: #FFFFFF;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	background: var(--theme_color);
}
.coupons_item_label{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	max-width: 400px;
}
.coupons_item_label_title{
	font-weight: bold;
	line-height: 18px;
	color:var(--theme_color);
	display: none;
}

.coupons_item_label_value{
	font-weight: bold;
	line-height: 18px;
	color: var(--theme_color);
	font-size:12px;
}
.coupons_item_label_des{
	font-weight: 300;
	display: flex;
	align-items: center;
	line-height: 18px;
	gap: 40px;
	font-size:12px;
}
.coupons_item_label_des_item{
	display: flex;
	gap:6px;
}
.coupons_item_label_des_item svg{
	margin-top: 2px;
}
.coupons_item_btn{
	justify-content: center;
	align-items: center;
	display: none;
}
.coupons_btn{
	width: 100%;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
	color: #FFFFFF;
	background: var(--theme_color);
	opacity: 1;
	padding: 10px 30px;
}
.block_title{
	margin-top: calc(var(--general_layout_spacing) * var(--title_margin_bottom_scale));
}
.coupons_item_body{
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 0 10px;
	margin:  14px 0;
	gap: 10px;
	border-left: 1px dashed var(--border-color);

}
.coupons_wap_hide{
	display: none;
}
.coupons_wap_show{
	display: block;
}
.coupons_list_item>.icon{
	margin-right: 20px;
    align-self: center;
}

@media (min-width:775px) {
.coupons_list_item-li{
	width: calc(50% - 10px);
	height:150px;
}
.coupons_item_label_des,.coupons_item_label_value{
	font-size:inherit;
}
.coupons_wap_show{
	display: none;
}
	.coupons_item_btn{
		width: auto;
		display: flex;
	}
	.coupons_item_body{
		flex: 1;
		justify-content: space-between;
	display: flex;
	flex-direction: row;
	padding: 0 20px;
}
.coupons_item_value{
	width: 160px;
	font-size: 24px;
	padding: 0 20px 0 40px;
}

.coupons_item_label_title{
	display: block;
}

.coupons_item_value_des{
	color: var(--theme_color);
}
.coupons_wap_hide{
	display: block;
}
.coupons_item_value_btn{
	height: 36px;
}
.coupons_item_value_number{
	font-size: 25px;
}

}
</style>

{% assign  color_style_array =  section.settings.theme_color | split : "," %}
{% assign replace_str =  color_style_array.last %}


{% assign coupons_ids = section.blocks | get_array_values: "coupon" | get_array_values: "id" | join: "," %}

{% get_coupons coupon_ids={coupons_ids} limit=100 output=array %}
<div class="container_wrapper">
  {% include 'block_title', title:lang.coupons.title, detail:section.settings.detail %}
	<div class="coupons_list_warp" style="--title_color:{{section.settings.title_color}};--date_color:{{section.settings.date_color}};--theme_color:{{section.settings.theme_color}};--border-color:{{ section.settings.theme_color | replace:replace_str, ".2)" }};--bg-color:{{ section.settings.theme_color | replace:replace_str, ".04)" }};">
		{% for coupon in coupons %}
		<div class="coupons_list_item-li" >
			<a class="coupons_list_item" href="/coupons/{{coupon.handle}}">
				<div class="coupons_item_value">
					<div class="coupons_item_value_number">
						{% if coupon.rule.discount.type == "1" %}
						<div>{{ coupon.rule.discount.value }}%</div> <span style="font-weight: 400;">OFF</span>
						{% else %}
						<span>-{{ coupon.rule.discount.value | money }}</span> 
						{% endif %}
					</div>
				</div>
				<div class="coupons_item_body">
					<div class="coupons_item_label">
						<div class="coupons_item_label_value line-clamp2" style="text-align: left;">{{coupon.coupon_name}}</div>
					
						<div class="coupons_item_label_des" style='color:{{ section.settings.theme_color | replace:replace_str, ".7)" }};'>
							<div class="coupons_item_label_des_item">
								<svg t="1683167634586" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14851" width="14" height="14"><path d="M512 960c-249.6 0-448-198.4-448-448s198.4-448 448-448 448 198.4 448 448-198.4 448-448 448zM512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384-172.8-384-384-384z" fill="currentColor" p-id="14852"></path><path fill="currentColor"  d="M736 512H512V288c0-19.2-12.8-32-32-32s-32 12.8-32 32v256c0 19.2 12.8 32 32 32h256c19.2 0 32-12.8 32-32s-12.8-32-32-32z" p-id="14853"></path></svg>
								{% if coupon.ends_at == -1 %}
								<span>{{lang.coupon.no_expiration_date}}</span>
								{% else %}
								<span class="format-date" data-date="{{coupon.created_at}}" data-format="YYYY-mm-dd">{{ coupon.starts_at | date: "%Y-%m-%d" }}<span>
								<span>～<span>
								<span class="format-date" data-date="{{coupon.ends_at}}" data-format="YYYY-mm-dd">{{ coupon.ends_at | date: "%Y-%m-%d" }}</span>
								{% endif %}
							</div>
						</div>
						<div class="coupons_item_value_btn"  data-clipboard-text="{{ coupon.coupon_code }}">
							<span>{{coupon.coupon_code}}</span>
							<svg t="1683170259462" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15276" width="16" height="16"><path d="M768 256V0H0v768h256v256h768V256h-256zM128 128h512v512H128V128z m768 768H384v-128h384V384h128v512z" fill="currentColor" p-id="15277"></path></svg>
						</div>
					</div>
				</div>
				<svg t="1684307748895" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1535" width="16" height="16"><path fill="{{section.settings.theme_color}}" d="M272.384 848.896l360.0896-337.6128-359.68-336.0768a50.3296 50.3296 0 0 1 0-74.3936 58.88 58.88 0 0 1 79.4112-0.1024l399.36 373.248a50.3296 50.3296 0 0 1 0 74.3424l-399.7184 374.8864a58.88 58.88 0 0 1-79.4112 0.1024 50.3296 50.3296 0 0 1 0-74.3936z" p-id="1536"></path></svg>
				
			</a>
		</div>
		{% endfor %}

	</div>

</div>

<script>
$(function(){
	var clipboard = new ClipboardJS('.coupons_item_value_btn');
	$(".coupons_item_value_btn").click(function(event){
		event.preventDefault()
	})
	clipboard.on('success', function(e) {
			moi.alertInfo({content:"{{lang.coupon.copy_success}}",placement:"top",type:"success"})
			oemcartCouponRecord && oemcartCouponRecord(e.text)
	});

	clipboard.on('error', function(e) {
			console.log(e);
	});
})
</script>

{% schema %}
{
	"tag": "section",
	"class": "coupons_list",
	"is_global": false,
	"name": {
		"zh_CN": "优惠券列表",
		"en_US": "Coupon list"
	},
	"max_blocks": 80,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": ""
		},
		{
			"type": "card_color",
			"id": "theme_color",
			"label": {
				"zh_CN": "活动风格颜色",
				"en_US": "Promotion style color"
			},
			"show-alpha": "false",
			"color-format": "rgb",
			"default": "rgba(0,0,0,1)"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "选择优惠码",
				"en_US": "Choice promo code"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "优惠券",
				"en_US": "Coupons"
			},
			"type": "coupons-items",
			"settings": [
				{
					"type": "card_coupon",
					"label": {
						"zh_CN": "优惠券",
						"en_US": "Coupons"
					},
					"default": {
						"id": "",
						"title": ""
					},
					"id": "coupon"
				}
			]
		}
	],
	"default": {
		"settings": {
			"button_text": "Get Offer",
			"detail": "Enjoy Exclusive Discounts on All Products! Get Up to 20% Off Sitewide. Limited Time Offer.Shop Now!",
			"date_color": "#888888",
			"title_color": "#1D1F21",
			"theme_color": "rgba(29,31,33,1)"
		},
		"blocks": [
			{
				"coupon": {
					"id": "",
					"title": ""
				},
				"block_type": "coupons-items"
			}
		]
	}
}
{% endschema %}